import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 所有的任务列表
    list: [],
    // 文本框的内容
    inputValue: 'aaa',
    // 下一个Id
    nextId: 5,
    viewKey: 'all'
  },
  mutations: {
    // 6: 定义赋值参数方法initList，state代表state属性，list：所传的数据
    initList(state, list) {
      state.list = list
    },
    //14：为 store 中的 inputValue 赋值
    setInputValue(state, val) {
      console.log('调用了')
      state.inputValue = val
    },
    //16-1-4完成添加事项的操作---触发添加列表项
    addItem(state) {
      // 16-1-5完成添加事项的操作---实例化了一个添加对象
      const obj = {
        //下一个id
        id: state.nextId,
        // 获取文本框新内容
        info: state.inputValue.trim(),
        // 完成的状态
        done: false
      }
      // 16-1-5完成添加事项的操作--- 把新添加的对象加入到list数组中
      state.list.push(obj)
      // 16-1-6完成添加事项的操作---让id自加+ 获得最新的id
      state.nextId++
      // 16-1-7完成添加事项的操作--- 清空表单的值
      state.inputValue = ''
    },
    // 17-1-3完成删除任务事项的操作---根据Id删除对应的任务事项
    removeItem(state, id) {
      // console.log(id);
      //17-1-4完成删除任务事项的操作---根据Id查找对应项的索引
      //x 表示list数组中的每一个元素
      const i = state.list.findIndex(x => x.id === id)
      //17-1-5完成删除任务事项的操作---根据索引，删除对应的元素
      // i !== -1 表示里面有元素 还没有删除完
      if (i !== -1) {
        // 将当前元素删除
        state.list.splice(i, 1)
      }
    },
    // 19-1-4修改任务事项完成状态---触发store.js中mutations中的changeStatus方法，把参数id和复选框状态传过去
    // 修改列表项的选中状态
    changeStatus(state, param) {
      //  遍历数据列表中  获得id相同的数据
      const i = state.list.findIndex(x => x.id === param.id)
      // 如果i !== -1 则证明还有数据，可以进行获取
      if (i !== -1) {
        // param.status  获得最新的复选框状态
        // 赋值给最新的复选框里面
        state.list[i].done = param.status
      }
    },
    //21-1-3清楚已完成的任务--- 清除已完成的任务
    cleanDone(state) {
      // 清除已完成的任务 找到未完成的数据重新赋值到数据列表中(state.list)
      state.list = state.list.filter(x => x.done === false)
    },
    // 22-1-4动态按钮的高亮效果----修改视图的关键字
    changeViewKey(state, key) {
      state.viewKey = key
    }
  },
  actions: {
    // 4：请求数据
    getList(context) {
      // 6：使用axios请求json.js中的数据
      axios.get('/list.json').then(({ data }) => {
        // console.log(data)
        // 使用context.commit 可以触发mutations中的方法
        // initList 方法名，data传入的参数数据
        context.commit('initList', data)
      })
    }
  },

  getters: {
    // 20-1-3-使用getters统计未完成的任务的条数
    unDoneLength(state) {
      return state.list.filter(x => x.done === false).length
    },
    // 23-1-1实现列表数据的动态切换--- 根据state.viewKey得值返回不同得数据
    infolist(state) {
      if (state.viewKey === 'all') {
        return state.list
      }
      if (state.viewKey === 'undone') {
        // filter 方法用来迭代一个数组，并且按给出的条件过滤出符合的元素。
        return state.list.filter(x => !x.done)
      }
      if (state.viewKey === 'done') {
        return state.list.filter(x => x.done)
      }
      return state.list
    }
  }
  /*
  filter 方法用来迭代一个数组，并且按给出的条件过滤出符合的元素。

filter 方法传入一个回调函数，这个回调函数会携带一个参数，参数为当前迭代的项（我们叫它 val ）。

回调函数返回 true 的项会保留在数组中，返回 false 的项会被过滤出数组。

使用 filter 来创建一个新数组，新数组的值是 oldArray 中值小于6的元素。不许改变原数组 oldArray .

代码：

var oldArray = [1,2,3,4,5,6,7,8,9,10];

// 只能在这一行下面写代码

var newArray = oldArray.filter(function(val){return val<6;});
*/
})
